<template>
  <view :style="colorStyle">
    <view
      class="infobox1 flex aitems between c1F1F1F f32 fontWeight"
      v-if="list.length !== 0"
    >
      <view class="block1"> 共 {{ list.length }} 条 </view>
      <view class="block2" @click="edit">
        {{ operation ? "完成" : "管理" }}
      </view>
    </view>
    <view class="" style="height: 100rpx"> </view>
    <view class="heloModule" v-if="list.length !== 0">
      <view
        class="goodslist flex aitems"
        v-for="(item, index, key) in list"
        :key="key"
        @click="gourl(`/pages/goods/detail?id=${item.goodsId}`)"
      >
        <view class="check" v-if="operation" @click.stop="checkChange(index)">
          <radio
            :checked="item.check"
            color="var(--view-theme)"
            style="transform: scale(0.9)"
          />
        </view>
        <image :src="item.goodsImg" mode="aspectFill"></image>
        <view class="goodsinfo flex column between">
          <view class="info1 ellipsis1 c1F1F1F f28">
            {{ item.goodsName }}
          </view>
          <view class="info2 flex aitems cF65B49 fontWeight">
            <view class="priceInfo1 flex aitems"
              ><view class="tip1 f24"> ￥ </view>
              <view class="tip2 f32">
                {{ item.goodsPrice }}
              </view></view
            ><view class="priceInfo2 flex aitems"
              ><view class="tip1 f20"> ￥ </view>
              <view class="tip2 f28">
                {{ item.marketPrice }}
              </view></view
            >
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="list.length == 0" />

    <view class="" style="height: 190rpx"> </view>

    <view class="infobox2 flex aitems between" v-if="operation">
      <view class="check flex aitems" @click="allCheckChange">
        <radio
          color="var(--view-theme)"
          :checked="allCheck"
          style="transform: scale(0.9)"
        />
        <view class="info1 c1F1F1F f32 fontWeight"> 全选 </view>
      </view>
      <view class="btn1 cfff f32" @click="footprintRemove"> 取消足迹 </view>
    </view>
  </view>
</template>

<script>
import { footprintPage, footprintRemove } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go, msg, showModal } from "@/utils/wxAPI";
import colors from "@/mixins/color";
import { getToken, removeStorage, getStorage } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      operation: false,
      allCheck: false,
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.footprintPage();
    }
  },
  async onShow() {},
  methods: {
    async footprintPage() {
      loading();
      let { data } = await footprintPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        list.map((item) => {
          item.check = false;
        });
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
        this.operation = false;
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    gourl(url) {
      go(url);
    },
    edit() {
      this.operation = !this.operation;
    },
    checkChange(index) {
      this.list[index].check = !this.list[index].check;
      let allCheck = true;
      this.list.map((item) => {
        if (!item.check) {
          allCheck = false;
        }
      });
      this.allCheck = allCheck;
    },
    allCheckChange() {
      this.allCheck = !this.allCheck;
      if (this.allCheck) {
        this.list.map((item) => {
          item.check = true;
        });
      }
    },

    async footprintRemove() {
      let ids = [];
      this.list.map((item) => {
        if (item.check) {
          ids.push(item.id);
        }
      });
      if (ids.length == 0) {
        return msg("请选择一款商品");
      }
      showModal({
        t2: "是否将选中的商品删除？",
      })
        .then(async () => {
          loading();
          let { data } = await footprintRemove({
            ids: ids.join(","),
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            this.current = 1;
            this.footprintPage();
          }
          uni.hideLoading();
        })
        .catch((err) => {});
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.footprintPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.footprintPage();
  },
};
</script>

<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  position: fixed;
  top: 0;
  width: calc(100% - 56rpx);
  padding: 22rpx 28rpx;
  background: #fff;
  z-index: 99;
}

.heloModule {
  background: #fff;
  padding: 40rpx 30rpx 1rpx 30rpx;

  .goodslist {
    margin: 0 0 40rpx 0;
    background: #fff;
    border-radius: 24rpx;

    // padding: 16rpx;
    .check {
      width: 60rpx;
    }

    image {
      min-width: 144rpx;
      width: 144rpx;
      height: 144rpx;
      border-radius: 24rpx;
    }

    .goodsinfo {
      margin-left: 24rpx;
      width: calc(100% - 24rpx - 144rpx - 60rpx);
      height: 144rpx;

      .info2 {
        .tip1 {
          // position: relative;
          // top: 2rpx;
        }
        .priceInfo2 {
          margin-left: 8rpx;
          text-decoration: line-through;
          color: #999;
        }
      }
    }
  }
}

.infobox2 {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: calc(100% - 60rpx);
  background: #fff;
  padding: 10rpx 30rpx 50rpx;

  .check {
    .info1 {
      margin-left: 20rpx;
    }
  }

  .btn1 {
    width: 220rpx;
    border-radius: 63rpx;
    background: var(--view-theme);
    height: 84rpx;
    text-align: center;
    line-height: 84rpx;
  }
}
</style>
